<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动举例</title>
    <style>
        #red,#blue,#purple,#pink,#green,#yellow{
            width: 150px;
            height: 150px;
        }
        #red{
            background: red;
            float: left;/*设置元素做浮动：
                                    1.设置元素浮动，元素会脱离正常的文档流
                                    2.设置元素左浮动
                                        如果之前紧挨着的元素是浮动，改元素也跟着浮动
                                            左浮动 跟随着浮动 排在后面
                                            右浮动 自己在左边浮动 排成一行
                                        如果之前紧挨着的元素没有浮动，在自己所在的行进行左浮动
                                    */
        }
        #blue{
            background: blue;
            float: left;
        }
        #purple{
            background-color: purple;
            float: right;/*设置右浮动
                              如果紧挨着的元素有浮动
                                左浮动 在右侧自己浮动排成一行
                                右浮动 跟随浮动浮动在元素的左侧｛谁线浮动 谁在右侧｝
                        */
        }
        #pink{
            background: pink;
            float: right;
        }
        #green{
            background: green;
            clear: both;
           float: right;
        }
        #yellow{
           background: yellow;
            clear: both;
            
        }
    </style>

</head>
<body>
<div>
    <div id="red"></div>
    <div id="blue"></div>
    <div id="purple"></div>
    <div id="pink"></div>
    <div id="green"></div>
    <div id="yellow"></div>
</div>
</body>
</html>